<template>
    <header>
        <van-icon name="arrow-left" @click="$router.go(-1)" />
        <span v-if="$route.meta.topName">{{ $route.meta.topName }}</span>
        <van-tabs v-else width="600" @click-tab="handleScroll">
            <van-tab title="商品"></van-tab>
            <van-tab title="评价"></van-tab>
            <van-tab title="详情"></van-tab>
            <van-tab title="推荐"></van-tab>
        </van-tabs>
    </header>
    <div class="outerBox">
        <div class="sp" id="1">
            <div class="header">
                <Swiper />
            </div>
            <!-- 主副标题部分 -->
            <div class="content">
                <div class="price">
                    <span>￥{{ goodsInfo.newPrice }}</span>&nbsp;&nbsp;<i>￥{{ goodsInfo.oldPrice }}</i>
                </div>
                <div class="title">
                    <span>{{ goodsInfo.mainTitle }}</span>
                </div>
                <div class="subTitle">
                    <p>{{ goodsInfo.subTitle }}</p>
                    <ul v-for="(item, index) in goodsInfo.titleItems" :key="index">
                        <li>{{ item }}</li>
                    </ul>
                    <span class="cupon">{{ goodsInfo.uponTxt }}</span>
                </div>
            </div>
            <!-- 选中和地址信息 -->
            <div class="chooseInfo">
                <div>
                    <p class="first"><span>已选</span>&nbsp;&nbsp;&nbsp;<i>{{ goodsInfo.mainTitle }} 十周年图书 x1</i></p>
                    <van-icon name="arrow" />
                </div>
                <div>
                    <p class="second"><span>地址</span>&nbsp;&nbsp;&nbsp;
                        <van-icon name="location-o" /><i>{{ goodsInfo.address }} <em>{{ goodsInfo.isHasGood }}</em></i>
                    </p>
                    <van-icon name="arrow" />
                </div>
                <p class="last">
                    <span v-for="(item, index) in goodsInfo.serviceProtec" :key="index">
                        <van-icon name="passed" />{{ item }}
                    </span>
                </p>
            </div>
        </div>

        <!-- 用户评价部分 -->
        <div class="comment" id="2">
            <div class="top">
                <span>用户评价</span>
                <i>{{ goodsInfo.goodRecRate }}></i>
            </div>
            <div class="mid">
                <span v-for="(item, index) in goodsInfo.recomkeywords
" :key="index">{{ item }}</span>
            </div>
            <div class="bottom">
                <ul>
                    <li v-for="(item, index) in goodsInfo.recomBoxItems

" :key="index">
                        <!-- 评论块 -->
                        <div class="top">
                            <div class="left">
                                <div class="le"><img :src="item.avatar" alt=""></div>
                                <div class="user">
                                    <span>{{ item.nickname }}</span>
                                    <span>{{ item.time }}</span>
                                </div>
                            </div>
                            <div class="right">赞 <i>{{ item.zanCount }}</i></div>
                        </div>
                        <div class="mid">
                            {{ item.contentTxt }}
                        </div>
                        <div class="img">
                            <ul>
                                <li v-for=" (item, index) in goodsInfo.recomBoxItems[0].imgs" :key="index">
                                    <img :src="item" alt="">
                                </li>
                            </ul>
                        </div>
                        <!-- 评论块结束 -->
                    </li>
                </ul>
            </div>
        </div>
        <!-- 富文本区域 -->
        <div class="introduce" id="3">
            <span>商品详情</span>
            <p>富文本,商品介绍</p>
            <p>富文本,商品介绍</p>
            <p>富文本,商品介绍</p>
            <p>富文本,商品介绍</p>
            <p>富文本,商品介绍</p>
            <p>富文本,商品介绍</p>
            <p>富文本,商品介绍</p>
            <p>富文本,商品介绍</p>
            <p>富文本,商品介绍</p>
            <p>富文本,商品介绍</p>
            <p>富文本,商品介绍</p>
            <p>富文本,商品介绍</p>
            <p>富文本,商品介绍</p>
            <p>富文本,商品介绍</p>
            <p>富文本,商品介绍。。。。。。。</p>
        </div>
        <!-- 推荐商品区域 -->
        <div class="recGoods">
            <span>商品推荐</span>
            <ul>
                <li v-for="(item,index) in recGoodsList" :key="item.id">
                    <div class="close">
                        <i @click="handleCancelRec(item.id)">x</i>
                    </div>
                    <div class="img">
                        <img :src="item.image" alt="">
                    </div>
                    <div class="title">
                        <p>{{item.title}}</p>
                    </div>
                    <div class="price">
                        <p>￥{{item.price}}</p>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 购物车区域 -->
        <div class="cart">
            <div class="left">
            </div>
            <div class="right">
                <van-action-bar>
                    <van-action-bar-icon icon="home-o" text="首页" @click="$router.push('/')" />
                    <van-action-bar-icon icon="cart-o" text="购物车" @click="$router.push('/cart')" />
                    <van-action-bar-button type="warning" text="加入购物车" @click='handleBtnAddCart' />
                    <van-action-bar-button type="danger" text="立即购买" @click="show = true" />
                </van-action-bar>
            </div>
        </div>
    </div>
    <!-- 弹出层 -->
    <van-popup class="pop" closeable round v-model:show="show" position="bottom" :style="{ height: '60%' }">
        <div class="top">
            <div class="left">
                <img :src="querygood.img" alt="">
                <div class="inner">
                    <i>￥{{ querygood.price }}</i>
                    <span>{{ querygood.name }}</span>
                </div>
            </div>
        </div>
        <p>规格</p>
        <div class="mid">
            <span @click="isActive = 0" :class="{ span_active: isActive == 0 }">10周年图书</span>
            <span @click="isActive = 1" :class="{ span_active: isActive == 1 }">20周年图书</span>
        </div>
        <p>购买数量</p>
        <div class="amount">
            <van-stepper @change="handleAddCartAmount" v-model="cartAmount" input-width="45px" button-size="40px"
                min="0" />
        </div>
        <div class="button">
            <button @click="handleAddCart">确定</button>
        </div>
    </van-popup>

</template>

<script>
import Swiper from '../../components/swiper.vue'
import { getGoodsInfo, getOneGoodInfo, getFooterRecGoods } from '../../api/goodsDetail'
import { Dialog } from 'vant';
export default {
    name: "",
    components: {
        Swiper
    },
    data() {
        return {
            show: false,
            isActive: false,
            cartAmount: 0,
            goodsInfo: {},
            querygood: {},
            commitCartData: {},
            recGoodsList:[],
            itemsb:{}
        }
    },
    async created() {
        this.goodsInfo = (await getGoodsInfo()).goodInfo
        this.querygood = (await getOneGoodInfo()).good
        this.recGoodsList = (await getFooterRecGoods()).items.list
    },
    methods: {
        handleCancelRec(i) {
            this.recGoodsList = this.recGoodsList.filter(x=>x.id!=i)
        },
        handleScroll(e) {
            switch (e.name) {
                case 0:
                    document.documentElement.scrollTop = 0
                    break;
                case 1:
                    document.documentElement.scrollTop = 800

                    break;
                case 2:
                    document.documentElement.scrollTop = 1260

                    break;
                case 3:
                    document.documentElement.scrollTop = 1800

                    break;
                default:
                    break;
            }
        },
        handleBtnAddCart() {
            this.cartAmount = 1
            const collectGoodsDatas = {
                ...this.querygood
                ,
                cartAmount: this.cartAmount,
                isChecked: true
            }
            this.$store.dispatch('commitCartData', collectGoodsDatas)
            Dialog({ message: '加入购物车成功！' });
        },
        handleAddCartAmount(count) {
            this.cartAmount = count
        },

        handleAddCart() {
            if (this.cartAmount === 0) return Dialog({ message: '您尚未选择商品！！！' });
            const collectGoodsDatas = {
                ...this.querygood
                ,
                cartAmount: this.cartAmount,
                isChecked: true
            }
            this.$store.dispatch('commitCartData', collectGoodsDatas)
            Dialog({ message: '加入购物车成功！' });
        }
    },
}
</script>

<style lang="less" scoped>
* {
    font-style: normal;
}



header {
    .van-tabs {
        .van-tab {
            // background: #999 !important;
            height: 50px;
        }

        width: 90%;
        height: 50px;
        // background: #999 !important;
    }

    position: fixed;
    // background: #999;
    z-index: 99;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .van-icon {
        background: white;
        text-align: center;
        line-height: 50px;
        float: left;
        height: 50px;
        width: 20%;
    }
}

.outerBox {
    position: relative;
    margin-bottom: 60px;
    margin-top: 50px;
    overflow-y: auto;

    &::-webkit-scrollbar {
        /*隐藏滚轮*/
        display: none;
    }

    // 价格和主副标题部分
    .header {
        height: 360px;
    }

    .content {
        padding: 10px;

        // 价格部分
        .price {
            span {
                color: red;
                font-size: 28px;
            }

            i {
                text-decoration: line-through;
                color: #999;
            }
        }

        .title {
            font-weight: 550;
            font-size: 20px;
        }

        .subTitle {
            li {
                line-height: 30px;
            }

            .cupon {
                margin-top: 5px;
                display: block;
                height: 25px;
                width: 65%;
                font-size: 14px;
                background: #999;
                border-radius: 12.5px;
                text-align: center;
                line-height: 25px;
            }
        }
    }

    // 已选和地址信息
    .chooseInfo {
        padding: 10px;

        div {
            display: flex;
            justify-content: space-between;
            align-items: center;

            p {
                display: inline-block;

                em {
                    color: red;
                }
            }
        }

        .first {
            span {
                font-weight: 800;
            }
        }

        .second {
            span {
                font-weight: 800;
            }
        }

        .last {
            color: #999;
        }
    }

    // 用户评价信息
    .comment {
        width: 100%;
        padding: 10px;

        // 用户评价顶部
        .top {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;

            span {
                width: 30%;
                display: inline-block;
                font-weight: 600;
            }

            i {
                color: #999;
                margin-right: 20px;
            }
        }

        // 用户评价中部面包屑区
        .mid {
            display: flex;
            flex-wrap: wrap;
            margin: 10px 0;

            span {
                width: 80px;
                height: 25px;
                display: inline-block;
                background: pink;
                margin: 5px 5px;
                text-align: center;
                line-height: 25px;
                border-radius: 12.5px;
                color: #999;
            }
        }

        // 用户评价底部轮播模块
        .bottom {
            overflow-x: scroll;

            &::-webkit-scrollbar {
                /*隐藏滚轮*/
                display: none;
            }

            ul {
                display: flex;

                li {
                    flex-shrink: 0;
                    width: 350px;
                    height: 300px;
                    border: 1px solid #999;
                    border-radius: 10px;
                    margin-right: 30px;

                    .top {
                        width: 300px;
                        padding: 20px;

                        .left {
                            width: 60%;
                            display: flex;

                            .le {
                                width: 50px;
                                height: 40px;

                                img {
                                    width: 100%;
                                    height: 100%;
                                    border-radius: 20px;
                                }
                            }

                            .user {
                                width: 100%;
                                margin-left: 10px;

                                span {
                                    width: 100%;
                                    display: block;
                                    color: #999;

                                    &:first-child {
                                        color: black
                                    }
                                }
                            }
                        }

                        .right {
                            color: #999;
                        }
                    }

                    .mid {
                        padding: 10px;
                        color: rgb(75, 74, 74);
                    }

                    .img {
                        padding-left: 10px;

                        ul {
                            li {
                                width: 100px;
                                height: 100px;
                                border: none;

                                img {
                                    width: 100px;
                                    height: 100px;
                                    border-radius: 10px;
                                }
                            }
                        }

                    }

                }
            }
        }
    }

    // 富文本区域
    .introduce {
        padding: 10px;

        span {
            font-weight: 800;
        }
    }
.recGoods{
    span{
        margin-left: 10px;
        font-weight: 800;
    }
ul{
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    
    li{
        margin: 0 7px;
        padding: 5px;
        width: 40%;
        height: 300px;
        background: white;
        border: 1px solid #999;
        margin-bottom: 10px;
        border-radius: 5px;
        position: relative;
       
        .close{
            background: #999;
            width: 20px;
            height: 20px;
            text-align: center;
            border-radius: 10px;
            position: absolute;
            top: 5px;
            right: 5px;
        }
        .img{
            width: 90%;
            padding-top: 18px;
            padding-left: 8px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .title{
            font-size: 14px;
        }
        .price{
            color: red;
            font-size: 22px;
        }
    }
}
}


    // 底部加入购物车部分
    .cart {
        position: fixed;
        // z-index: 99;
        bottom: 0;
        left: 0;
        background: white;
        border-top: 1px solid #999;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 60px;
        width: 100%;

        .left {
            width: 35%;
            display: flex;
            justify-content: space-around;

            div {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

            }
        }

        .right {
            width: 250px;
            height: 50px;

            span {
                display: inline-block;
                width: 50%;
                height: 100%;
                text-align: center;
                line-height: 50px;
                color: white;

                &:nth-child(1) {
                    background: orange;
                    border-radius: 30px 0 0 30px;
                }

                &:nth-child(2) {
                    background: orangered;
                    border-radius: 0 30px 30px 0;
                }
            }
        }
    }

}

// 加入购物车弹出层
.pop {
    .top {
        padding: 20px;

        .left {
            display: flex;

            img {
                width: 100px;
                height: 100px;
                margin-right: 20px;
            }

            .inner {
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                i {
                    color: red;
                    display: block;
                    font-size: 26px;
                }

                span {
                    color: #999;
                    display: block;
                }
            }
        }
    }

    p {
        margin: 0 10px;
        font-weight: 600;
        font-size: 22px;
    }

    .mid {
        padding: 20px;
        flex-wrap: wrap;
        display: flex;

        span {
            margin-right: 10px;
            display: inline-block;
            width: 100px;
            height: 20px;
            background: #999;
            border: 1px solid #999;
            border-radius: 10px;
            text-align: center;
            color: white;
        }

        .span_active {
            display: inline-block;
            width: 100px;
            height: 20px;
            background: orange;
            border: 1px solid orangered;
            border-radius: 10px;
            text-align: center;
            color: white;
        }
    }

    .amount {
        margin-top: 10px;
        width: 50%;
        float: right;
    }

    .button {
        margin-top: 100px;
        text-align: center;

        button {
            width: 80%;
            height: 40px;
            border-radius: 20px;
            color: white;
            background: orangered;
            border: none;
        }
    }
}
</style>